<script setup lang="ts">
import {reactive, ref} from 'vue';
const props = defineProps([])
const emit = defineEmits(['upload', 'submit'])
import { InboxOutlined } from '@ant-design/icons-vue';
import epubCarousel  from  './epubCarousel.vue'
import {UploadProps} from 'ant-design-vue';
const fileList = ref([]);
import JSZip from "jszip";
import ePub, {Book} from 'epubjs'
import Epub from "epubjs/types/epub";

let  docList:any[] = reactive([])


function handleDrop(e: DragEvent) {
  console.log(e);
}


const beforeUpload: UploadProps['beforeUpload'] = file => {
  fileList.value = [...(fileList.value || []), file];
  emit("upload",file)
  return false;
};

// let  loadBook = (file)=>{
//   // 读取文件为ArrayBuffer
//   const reader = new FileReader();
//   reader.readAsArrayBuffer(file);
//   reader.onload =  (e) => {
//     // 加载EPUB文件
//     JSZip.loadAsync(reader.result).then((zip :JSZip)=> {
//       zip.forEach(function(relativePath, zipEntry) {
//         // 判断文件是否是.xhtml或.html文件
//
//         if (zipEntry.name.endsWith(".xhtml") || zipEntry.name.endsWith(".html")) {
//           console.log(zipEntry.name, 'zipEntry.name')
//           // 获取文本文件的内容
//           zipEntry.async("string").then(function(content) {
//             // 加载HTML文档
//             docList.push({
//               title:zipEntry.name,
//               content:content
//             });
//           });
//         }
//       });
//       const book = ePub(e.target.result);
//
//       book.loaded.metadata.then(metadata => {
//         emit("upload",docList,metadata,zip)
//       })
//
//     });
//   };
// }


</script>

<template>
  <main>
    <a-upload-dragger
        v-model:fileList="fileList"
        name="file"
        :multiple="false"
        :before-upload="beforeUpload"
        @drop="handleDrop"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">点击打开文件或把本地文件拖到这里</p>
      <p class="ant-upload-hint">
        支持单次上传。严禁上传公司数据或其他乐队文档
      </p>
    </a-upload-dragger>
  </main>
</template>

<style scoped>

</style>